<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>中国地图</title>
    <script src="../echarts.min.js"></script>
    <style>
        .zoom-controls {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            padding: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .zoom-btn {
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 50%;
            background: #1890ff;
            color: white;
            font-size: 20px;
            cursor: pointer;
            display: block;
            margin: 4px;
            transition: all 0.2s;
        }

        .zoom-btn:hover {
            background: #40a9ff;
            transform: scale(1.1);
        }
    </style>
</head>
<body>
<div id="map" style="width: 100vw; height: 100vh;"></div>
<div class="zoom-controls">
    <button class="zoom-btn" onclick="zoom(0.2)">+</button>
    <button class="zoom-btn" onclick="zoom(-0.2)">-</button>
</div>

<script>
    let myChart = echarts.init(document.getElementById('map'));
    let currentZoom = 1;
    //加载地图效果
    fetch('../map-json/china.json')
        .then(response => response.json())
        .then(geoJson => {
            echarts.registerMap('china', geoJson);
            let option = {
                geo: {
                    map: 'china',
                    roam: true,
                    scaleLimit: { min: 1, max: 10 },
                    itemStyle: {
                        areaColor: '#e6f7ff', // 区域颜色
                        borderColor: '#1890ff' // 边界颜色
                    },
                    emphasis: { // 高亮状态
                        itemStyle: {
                            areaColor: '#91d5ff'
                        }
                    }
                },
                series: []
            };
            myChart.setOption(option);

            myChart.on('click', params => {
                if (params.componentType === 'geo') {
                    const provinceName = params.name;
                    const pinyinName = provinceName
                        .replace(/省|市|自治区|特别行政区/g, '')
                        .toLowerCase();

                    window.location.href = `provinces/${pinyinName}/index.html`;
                }
            });
        });
    //地图放大缩小功能
    function zoom(ratio) {
        currentZoom += ratio;
        currentZoom = Math.max(0.5, Math.min(3, currentZoom));

        myChart.setOption({
            geo: {
                zoom: currentZoom,
                center: myChart.getOption().geo[0].center
            }
        });
    }
</script>
</body>
</html>
